<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <form th:replace="common/css-js :: common-css"></form>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
        #f{
            position: absolute;
            top: -40px;
            left: 590px;
        }
    </style>
</head>

<body>
<div th:replace="common/bar :: navbar"></div>
<div th:replace="common/bar ::sidebar(activeUrl='course')"></div>

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" th:object="${page}">
    <h2 class="text-center">课程列表</h2>
    <br/>
    <div class="row">
        <a class="btn btn-primary btn-sm offset-md-1" href="#" id="add" >添加</a>
    </div>
    <div style="margin-left:70%;">
        <form class="form-inline" th:action="@{/course}" method="get">
            <div class="form-group">
                <label for="inputPassword2" class="sr-only">Password</label>
                <input type="text" class="form-control" id="inputPassword2" placeholder="请输入课程"  name="courseName">
            </div>
            <button type="submit" class="btn btn-primary mb-2">查询</button>
        </form>
        <!--         <button href="#"  class="btn btn-sm btn-primary update_btn" id="select">搜索</button>-->
    </div>.
    <div class="table-responsive">
        <table class="table table-striped table-sm">
            <thead>
            <tr>
                <th>#</th>
                <th>Id</th>
                <th>Name</th>
                <th>Curriculum</th>
                <th>Credit</th>
                <th>TeacherName</th>
                <th>AuditStatus</th>
                <th>operate</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="course,stat:*{records}">
                <td th:text="${stat.count}"></td>
                <td th:text="${course.courseId}"></td>
                <td th:text="${course.courseName}"></td>
                <td th:text="${course.courseCurriculum}"></td>
                <td th:text="${course.courseCredit}"></td>
                <td th:text="${course.teacher.teacherName}"></td>
                <td th:text="${course.courseAuditStatus}"></td>
                <td>
                    <button href="#"  class="btn btn-sm btn-primary" id="update_btn"
                            th:attr="update_url=|@{/course/}${course.courseId}|">修改</button>
                    <button class="btn btn-sm btn-danger" id="del_btn"
                            th:attr="del_url=|@{/delete1/}${course.courseId}|">删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
        <nav aria-label="Page navigation example">
            <ul class="pagination">
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${courseName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=1)}">首页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${courseName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=1,studentName=${studentName})}">首页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${courseName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=*{current}-1)}">上一页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasPrevious()}?'page-item':'page-item disabled'" th:if="${courseName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=*{current}-1,courseName=${courseName})}">上一页</a>
                </li>

                <li class="page-item" th:each="pageNum:${pageNums}"
                    th:class="${pageNum}==*{current}?'page-item active':'pageitem'" th:if="${courseName ==null}">
                    <a class="page-link"
                       th:href="${pageNum}==*{current}?'javascript:void(0);':@{/course(current=${pageNum})}"
                       th:tabindex="${pageNum}==*{current}?'-1'">
                        [[${pageNum}]]
                        <span class="sr-only" th:if="${pageNum}==*{current}">
(current)</span>
                    </a>
                </li>
                <li class="page-item" th:each="pageNum:${pageNums}"
                    th:class="${pageNum}==*{current}?'page-item active':'pageitem'" th:if="${courseName !=null}">
                    <a class="page-link"
                       th:href="${pageNum}==*{current}?'javascript:void(0);':@{/course(current=${pageNum},courseName=${courseName})}"
                       th:tabindex="${pageNum}==*{current}?'-1'">
                        [[${pageNum}]]
                        <span class="sr-only" th:if="${pageNum}==*{current}">
(current)</span>
                    </a>
                </li>
                <li class="page-item" th:class="*{hasNext()}?'page-item':'pageitem disabled'" th:if="${courseName ==null}">
                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/course(current=*{current}+1)}">下一页</a>

                </li>
                <li class="page-item" th:class="*{hasNext()}?'page-item':'pageitem disabled'" th:if="${courseName !=null}">
                    <!--                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/query?studentName=(current=*{current}+1)}">下一页</a>-->
                    <a class="page-link" href="#" th:tabindex="*{not hasNext()}?'-1'" th:href="@{/course(current=*{current}+1,courseName=${courseName})}">下一页</a>
                </li>

                <li class="page-item disabled" th:class="*{hasNext()}?'pageitem':'page-item disabled'" th:if="${courseName ==null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=*{pages})}">尾页</a>
                </li>
                <li class="page-item disabled" th:class="*{hasNext()}?'pageitem':'page-item disabled'" th:if="${courseName !=null}">
                    <a class="page-link" href="#" tabindex="-1"
                       th:tabindex="*{not hasPrevious()}?'-1'"
                       th:href="@{/course(current=*{pages},studentName=${courseName})}">尾页</a>
                </li>
            </ul>
        </nav>


    </div>

    <form id="delete_form" method="post">
        <input type="hidden" name="_method" value="DELETE">
    </form>
</main>
<div th:if="${#lists.isEmpty(page.records)}">
    <h2>暂无数据</h2>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="margin-top: 15%">
        <!-- 此处设置id属性及thymeleaf片段，用于加载后端的域数据 -->
        <div class="modal-content" id="addOrUpdate" th:fragment="addOrUpdate" >
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel"
                    th:text="${course!=null}?'课程修改页':'课程添加页'">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form th:action="@{/courses1}"  id="updateForm">
                    <input type="hidden" name="courseId" th:if="${course !=null}" th:value="${course.courseId}">
                    <div class="form-group">
                        <label for="courseName">Name</label>
                        <input type="text" class="form-control" id="courseName"
                               placeholder="name"  name="courseName" th:value="${course!=null}?${course.courseName}">
                        <!-- <input type="text" class="form-control" id="employeeName"
                                placeholder="lisi" name="employeeName">-->
                    </div>
                    <div class="form-group">
                        <label for="courseCurriculum">Curriculum</label>
                        <select class="form-control" id="courseCurriculum" name="courseCurriculum" style="height: 45px">
                            <option th:text="${course.courseCurriculum}" th:if="${course!=null}" th:type="${course!=null}?'text':'hidden'"></option>
                            <option th:if="${course!=null}" th:style="${course.courseCurriculum=='专业必修课'}?'display:none':''">专业必修课</option>
                            <option th:if="${course==null}">专业必修课</option>
                            <option th:if="${course!=null}" th:style="${course.courseCurriculum=='专业选修课'}?'display:none':''">专业选修课</option>
                            <option th:if="${course==null}">专业选修课</option>
                            <option th:if="${course!=null}" th:style="${course.courseCurriculum=='公共必修课'}?'display:none':''">公共必修课</option>
                            <option th:if="${course==null}">公共必修课</option>
                            <option th:if="${course!=null}" th:style="${course.courseCurriculum=='公共选修课'}?'display:none':''">公共选修课</option>
                            <option th:if="${course==null}">公共选修课</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="courseCredit">Credit</label>
                        <input type="text" class="form-control" id="courseCredit" placeholder="Credit"  name="courseCredit" th:value="${course!=null}?${course.courseCredit}">
                    </div>

                    <div class="form-group">
                        <label for="teachers">Teacher</label>
                        <select class="form-control" id="teachers" name="teaTeacherId" style="height: 50px">
                            <option th:each="teacher:${teachers}"
                                    th:text="${teacher.teacherName}"
                                    th:value="${teacher.teacherId}"
                                    th:selected="${course!=null}?${course.teaTeacherId==teacher.teacherId}"></option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="courseAuditStatus">AuditStatus</label>
                        <select class="form-control" id="courseAuditStatus" name="courseAuditStatus"  style="height: 45px">
                            <option th:text="${course.courseAuditStatus}" th:if="${course!=null}" th:type="${course!=null}?'text':'hidden'"></option>
                            <option th:if="${course!=null}" th:style="${course.courseAuditStatus=='通过'}?'display:none':''">通过</option>
                            <option th:if="${course==null}">通过</option>
                            <option th:if="${course!=null}" th:style="${course.courseAuditStatus=='未通过'}?'display:none':''">未通过</option>
                            <option th:if="${course==null}">未通过</option>
                        </select>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="update" th:text="${course!=null}?'修改':'添加'">Save changes</button>

                    </div>
                </form>
            </div>

        </div>
    </div>

</div>


<div th:replace="common/css-js :: common-js"></div>
<script>
    feather.replace()
</script>
<script th:inline="javascript">
    let add_url=/*[[@{/toAdd1}]]*/;
    let list_url=/*[[@{/course}]]*/;


    $("table").on("click", "#del_btn", function () {
        console.log("dfdf")
        let url = $(this).attr("del_url");
        console.log(url)
        $.ajax({
            url:url,
            type:"delete",
            dataType:"json",
            success:function (res){
                if (res){
                    alert(res?"成功":"失败")
                }
                location.href = list_url;
            }
        })

    })

    $("#add").on("click",function () {
        // console.log("hell")
        $("#addOrUpdate").load(add_url+" #addOrUpdate",function () {
            $("#myModal").modal({
                keyboard: false,
                backdrop: 'static',
                show: true
            })
        })
    })


    $("body").on("click","#update",function () {
        // let word = $("[name='_method']").val()=='PUT'?'修改':'添加';
        $.ajax({
            url:$("#updateForm").attr("action"),
            type:"post",
            data:$("#updateForm").serialize(),
            // dataType:"json",
            success:function (res){
                alert( res);
                location.href = list_url;

            }
        })
    })

    $("table").on("click","#update_btn",function () {
        $("#addOrUpdate").load($(this).attr("update_url")+"#addOrUpdate",function () {
            $("#myModal").modal({
                keyboard: false,
                backdrop:'static',
                show:true
            })
        });
    })


</script>

</body>
</html>